<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: easyui-header('角色列表')" />
	<th:block th:include="include :: ztree-css" />
</head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-head">
				<div class="easyui-panel">
					<form id="role-form">
						<div class="select-list">
							<ul>
								<li>
									<label>角色名称：</label>
									<input type="text" name="roleName" class="easyui-textbox" data-options="prompt:'请输入角色名称'"/>
								</li>
								<li>
									<label>权限字符：</label>
									<input type="text" name="roleKey" class="easyui-textbox" data-options="prompt:'请输入权限字符'"/>
								</li>
								<li>
									<label>角色状态：</label>
									<select name="status" class="easyui-combobox" th:with="type=${@dict.getType('sys_normal_disable')}">
										<option value=" ">所有</option>
										<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
									</select>
								</li>
								<li>
									<label>创建时间： </label>
									<input type="text" id="startTime" class="easyui-datebox" style="width: 110px;" data-options="prompt:'开始时间'" name="params[beginTime]"/>
									<span>-</span>
									<input type="text" id="endTime" class="easyui-datebox" style="width: 110px;" data-options="prompt:'结束时间'" name="params[endTime]"/>
								</li>
								<li>
									<a class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="$.easyUIDataGrid.search()" >查询</a>
									<a class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="$.easyUIDataGrid.reset()" >重置</a>
								</li>
							</ul>
						</div>
					</form>
				</div>
			</div>
			<div class="col-sm-12 search-body">
			     <div id="toolbar" role="group">
		            <a class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="$.easyUIOperate.add()" shiro:hasPermission="system:role:add">新增</a>
		            <a class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="$.easyUIOperate.edit()" shiro:hasPermission="system:role:edit">修改</a>
		            <a class="easyui-linkbutton" data-options="iconCls:'icon-delete'" onclick="$.easyUIOperate.removeAll()" shiro:hasPermission="system:role:remove">删除</a>
		            <a class="easyui-linkbutton" data-options="iconCls:'icon-export'" onclick="$.easyUIOperate.exportExcel()" shiro:hasPermission="system:role:export">导出</a>
		        </div>
			    <table id="dg" class="easyui-datagrid"></table>
			</div>
		</div>
	</div>
	<th:block th:include="include :: easyui-footer" />
	<th:block th:include="include :: ztree-js" />
 	<script th:inline="javascript">
 		var editFlag = [[${@permission.hasPermi('system:role:edit')}]];
		var removeFlag = [[${@permission.hasPermi('system:role:remove')}]];
    </script>
	<script th:inline="none">
		var prefix = ctx + "system/role";
		$(function() {
		    var options = {
		        url: prefix + "/list",
		        createUrl: prefix + "/add",
		        updateUrl: prefix + "/edit/{id}",
		        removeUrl: prefix + "/remove",
		        exportUrl: prefix + "/export",
		        modalName: "角色",
		        idField: 'roleId',
		        sortName: "roleSort",
                sortOrder: "asc",
		        columns: [[
					{
						field:'ck',
						checkbox:true,
						width:30
					},
			        {
			            field: 'roleId',
			            title: '角色编号',
		            	align: 'center',
		            	hidden:true,
						width: 20
			        },
			        {
			            field: 'roleName',
			            title: '角色名称',
			            sortable: true,
			            align: 'center',
			            width: 80
			        },
			        {
			            field: 'roleKey',
			            title: '权限字符',
			            sortable: true,
			            align: 'center',
			            width: 80
			        },
			        {
			            field: 'roleSort',
			            title: '显示顺序',
			            sortable: true,
			            align: 'center',
			            width: 60
			        },
			        {
			        	field: 'status',
			        	title: '角色状态',
			        	align: 'center',
			        	width: 60,
			        	formatter: function (value, row, index) {
			        		return statusTools(row);
			        	}
			        },
			        {
			            field: 'createTime',
			            title: '创建时间',
			            sortable: true,
			            align: 'center',
		          		width: 100
			        },
			        {
			        	field:'action',
			            title: '操作',
			            align: 'center',
			            width: 120,
			            formatter: function(value, row, index) {
			                var actions = [];
			                actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.easyUIOperate.edit(\'\',\'\',\'' + row.roleId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
			                actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.easyUIOperate.remove(\'' + row.roleId + '\')"><i class="fa fa-remove"></i>删除</a> ');
			                actions.push("<a class='btn btn-info btn-xs " + editFlag + "' href='javascript:void(0)' onclick='authDataScope(" + row.roleId + ")'><i class='fa fa-check-square-o'></i>数据权限</a> ");
			                actions.push("<a class='btn btn-primary btn-xs " + editFlag + "' href='javascript:void(0)' onclick='authUser(" + row.roleId + ")'><i class='fa fa-user'></i>分配用户</a>");
			                return actions.join('');
			            }
			        }
		        ]],
		        onLoadSuccess: function(data){
		        	$(this).datagrid('doCellTip', { 'max-width': '700px', 'delay': 300 });
		        	if(editFlag == "" ? true : false){
		        		$(this).datagrid('showColumn', 'status');//列的field值
		        	} else {
		        		$(this).datagrid('hideColumn', 'status');//列的field值
		        	}
		        }
		    };
		    $.easyUIDataGrid.init(options);
		});
		
		/* 角色管理-分配数据权限 */
		function authDataScope(roleId) {
		    var url = prefix + '/authDataScope/' + roleId;
		    $.easyUIModal.open("分配数据权限", "icon-edit", "authDataScopeDialog", url, 600, 580);
		}
		
		/* 角色管理-分配用户 */
		function authUser(roleId) {
		    var url = prefix + '/authUser/' + roleId;
		    $.modal.openTab("分配用户", url);
		}
		
		/* 角色状态显示 */
		function statusTools(row) {
		    if (row.status == 1) {
    			return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.roleId + '\')"></i> ';
    		} else {
    			return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.roleId + '\')"></i> ';
    		}
		}
		
		/* 角色管理-停用 */
		function disable(roleId) {
			$.messager.confirm("确认", "确认要停用角色吗？", function (isDelete) {
 	        	if (isDelete) {
 	        		$.easyUIOperate.post(prefix + "/changeStatus", { "roleId": roleId, "status": 1 });
 	        	}
 	        });
		}

		/* 角色管理启用 */
		function enable(roleId) {
			$.messager.confirm("确认", "确认要启用角色吗？", function (isDelete) {
 	        	if (isDelete) {
 	        		$.easyUIOperate.post(prefix + "/changeStatus", { "roleId": roleId, "status": 0 });
 	        	}
 	        });
		}
	</script>
</body>
</html>